<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">

        <ui:define name="title">
            Cadastrar Ato
        </ui:define>

        <ui:define name="content">

            <div class="actions">
                <div id="buttons">
                    <p:button value="Pesquisar Ato" outcome="pesquisarAto.xhtml"
                              rendered="#{ managerCriarAto.ato.id == null }"
                              icon="ui-icon-search" styleClass="ui-priority-primary">
                    </p:button>

                </div>
            </div>

            <h:form id="criarAtoForm">
                <p:fieldset legend="Dados" id="criarAtoPanel" >
                    <p:messages id="criarAtoMessages" autoUpdate="true" />

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Código" for="codigoInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="codigoInputText" value="#{ managerCriarAto.ato.codigo }"
                                         required="true" requiredMessage="Código é obrigatório" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Ato" for="atoTipoInputText" />
                        </div>
                        <div class="column8">
                            <p:inputText id="atoTipoInputText" value="#{ managerCriarAto.ato.atoTipo.descricao }"
                                         required="true" requiredMessage="Tipo do ato é obrigatório">

                                <script type="text/javascript">
                                    $(document).ready(function(){
                                        $('#criarAtoForm\\:atoTipoInputText').attr('readonly', 'readonly');
                                    });
                                </script>

                            </p:inputText>
                        </div>
                        <p:commandButton styleClass="icon-plus" icon="ui-icon-plus" onclick="dialogAtoTipo.show();" process="@this" update="@this" immediate="true" />
                    </div>
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Descrição" for="descricaoInputTextarea" />
                        </div>
                        <div class="column8">
                            <p:inputTextarea id="descricaoInputTextarea" value="#{ managerCriarAto.ato.descricao }"
                                             required="true" requiredMessage="Descrição é obrigatório" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Tipo do Selo" for="tipoSeloInputText" />
                        </div>
                        <div class="column8">
                            <p:inputText id="tipoSeloInputText" value="#{ managerCriarAto.ato.tipoSelo.nome }" readonly="true"
                                         required="true" requiredMessage="Tipo do Selo é obrigatório"/>
                        </div>
                        <p:commandButton styleClass="icon-plus" icon="ui-icon-plus" onclick="dialogTipoSelo.show();" process="@this" update="@this" immediate="true" />
                    </div>
                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Sigla" for="siglaInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="siglaInputText" value="#{ managerCriarAto.ato.sigla }" styleClass="grid_6" />
                        </div>

                        <div class="column2">
                            <p:outputLabel value="Prazo (Dias)" for="prazoInputText" />
                        </div>
                        <div class="column3">
                            <p:inputText id="prazoInputText" value="#{ managerCriarAto.ato.prazo }" styleClass="grid_6"
                                         onkeypress="jQuery(this).autoNumeric({aSep: '', aDec: ',', vMin:0, wEmpty: '0', mDec: 0});"
                                         requiredMessage="Prazo é obrigatório" required="true" />
                        </div>
                    </div>

                    <div class="row">
                        <div class="column2">
                            <p:outputLabel value="Campos do Ato" for="atoCompoPickList" />
                        </div>
                        <div class="column6">
                            <p:pickList id="atoCompoPickList" value="#{ managerCriarAto.atoCompoDualList }" var="atoCampo"
                                        itemValue="#{ atoCampo }" itemLabel="#{ atoCampo.nome }" converter="conversoratocampo" >
                                <f:facet name="sourceCaption">Campos</f:facet>
                                <f:facet name="targetCaption">Campos Selecionados</f:facet>
                            </p:pickList>
                        </div>
                    </div>

                    <div class="command">
                        <p:commandButton value="Adicionar" actionListener="#{ managerCriarAto.adicionarAto() }" update="@form"
                                         icon="ui-icon-plus" process="@form" />
                        <p:commandButton value="Limpar" update="@form" process="@this" icon="ui-icon-close"
                                         actionListener="#{ managerCriarAto.limpar() }" />
                    </div>

                    <p:dataTable id="atodataTable" value="#{ managerCriarAto.atos }" var="ato"
                                 rows="5" paginator="true" paginatorPosition="bottom" emptyMessage="Nenhum ato adicionado">
                        <f:facet name="header">Atos</f:facet>

                        <p:column headerText="Opções" width="5%">
                            <div class="options2">
                                <p:commandButton icon="ui-icon-pencil" actionListener="#{ managerCriarAto.editarAto(ato) }"
                                                 process="@this" update=":criarAtoForm:criarAtoPanel" />
                                <p:commandButton icon="ui-icon-trash" actionListener="#{ managerCriarAto.removerAto(ato) }"
                                                 process="@this" update="atodataTable" />
                            </div>
                        </p:column>

                        <p:column headerText="Código">
                            <h:outputText value="#{ ato.codigo }" />
                        </p:column>
                        <p:column headerText="Descrição">
                            <h:outputText value="#{ ato.descricao }" />
                        </p:column>
                        <p:column headerText="Sigla">
                            <h:outputText value="#{ ato.sigla }" />
                        </p:column>
                        <p:column headerText="Tipo do Ato">
                            <h:outputText value="#{ ato.atoTipo.descricao }" />
                        </p:column>
                        <p:column headerText="Tipo do Selo">
                            <h:outputText value="#{ ato.tipoSelo.nome }" />
                        </p:column>
                        <p:column headerText="Prazo">
                            <h:outputText value="#{ ato.prazo }" />
                        </p:column>
                    </p:dataTable>

                </p:fieldset>

                <div class="command">
                    <p:commandButton value="Salvar" actionListener="#{ managerCriarAto.salvar() }" update="@form"
                                     icon="ui-icon-disk" process="@this, :criarAtoForm:atodataTable"
                                     styleClass="ui-priority-primary" 
                                     onsuccess="goY(0);"/>
                    <p:button value="Cancelar" icon="ui-icon-cancel" href="pesquisarAto.xhtml" />
                </div>                

                <p:dialog id="atoTipoDialog" widgetVar="dialogAtoTipo" header="Tipo do Ato" dynamic="true" modal="true" appendToBody="false"
                          resizable="false" width="90%" height="450px" draggable="false" closable="false">

                    <p:fieldset id="atoTipoPesquisarFieldset" styleClass="column12" legend="Filtros">
                        <f:validateBean disabled="true">
                            <div class="row">
                                <div class="column2">
                                    <p:outputLabel value="Descrição" for="atoTipoDescricaoInputText" />
                                </div>
                                <div class="column9">
                                    <p:inputText id="atoTipoDescricaoInputText" value="#{ managerCriarAto.atoTipoPesquisa.descricao }" />
                                </div>
                            </div>
                        </f:validateBean>
                    </p:fieldset>

                    <div class="command">
                        <p:commandButton actionListener="#{ managerCriarAto.pesquisarAtoTipos() }" value="Pesquisar"
                                         update=":criarAtoForm:atoTipoPesquisarFieldset, :criarAtoForm:atoTipoDataTable" process="@this, :criarAtoForm:atoTipoPesquisarFieldset"
                                         icon="ui-icon-search" />
                    </div>

                    <p:dataTable id="atoTipoDataTable" var="atoTipo" value="#{ managerCriarAto.atoTipos }" styleClass="column12"
                                 rows="5" paginator="true" paginatorPosition="bottom" rowKey="#{ atoTipo.id }"
                                 selection="#{ managerCriarAto.atoTipoSelecionado }" selectionMode="single"
                                 emptyMessage="Nenhum Tipo de Ato encontrado">
                        <p:ajax event="rowSelect"  process="@this" update="@this"/>

                        <p:column headerText="Descrição">
                            <h:outputText value="#{ atoTipo.descricao }" />
                        </p:column>
                    </p:dataTable>

                    <div class="command">
                        <p:commandButton actionListener="#{ managerCriarAto.selecionarAtoTipo() }" styleClass="ui-priority-primary"
                                         update=":criarAtoForm:atoTipoInputText, :criarAtoForm:atoTipoDialog" process="@this"
                                         value="Selecionar" icon="ui-icon-plus" oncomplete="dialogAtoTipo.hide();" />
                        <p:commandButton value="Cancelar" icon="ui-icon-cancel" onclick="dialogAtoTipo.hide()" process="@this"
                                         actionListener="#{ managerCriarAto.limparAtoTipos() }"
                                         update=":criarAtoForm:atoTipoDialog" />                            
                    </div>
                </p:dialog>

                <p:dialog id="tipoSelodialog" widgetVar="dialogTipoSelo" header="Tipo do Selo" dynamic="true" modal="true" appendToBody="false"
                          resizable="false" width="90%" height="450px" draggable="false" closable="false">

                    <p:fieldset id="tipoSeloPesquisarFieldset" legend="Filtros" styleClass="column12">
                        <f:validateBean disabled="true">
                            <div class="row">
                                <div class="column2">
                                    <p:outputLabel value="Descrição" for="tipoSeloNomeInputText" />
                                </div>
                                <div class="column8">
                                    <p:inputText id="tipoSeloNomeInputText" value="#{ managerCriarAto.tipoSeloPesquisa.nome }" />
                                </div>
                            </div>
                        </f:validateBean>

                    </p:fieldset>

                    <div class="command">
                        <p:commandButton value="Pesquisar" actionListener="#{ managerCriarAto.pesquisarTiposSelo() }" icon="ui-icon-search"
                                         update=":criarAtoForm:tipoSeloPesquisarFieldset, :criarAtoForm:tiposSeloDataTable" process="@this, :criarAtoForm:tipoSeloPesquisarFieldset" />
                    </div>

                    <p:dataTable id="tiposSeloDataTable" value="#{ managerCriarAto.tiposSelo }" var="tipoSelo"
                                 styleClass="column12"
                                 rows="5" paginator="true" paginatorPosition="bottom" rowKey="#{ tipoSelo.id }"
                                 selection="#{ managerCriarAto.tipoSeloSelecionado }" selectionMode="single"
                                 emptyMessage="Nenhum Tipo de Selo encontrado">
                        <p:ajax event="rowSelect"  process="@this" update="@this"/>

                        <p:column headerText="Nome">
                            <h:outputText value="#{ tipoSelo.nome }" />
                        </p:column>
                        <p:column headerText="Cor">
                            <div class="color" style="background: \##{ tipoSelo.corSelo }"></div>
                        </p:column>
                        <p:column headerText="Aplicação">
                            <h:outputText value="#{ tipoSelo.aplicacao.nome }" />
                        </p:column>
                    </p:dataTable>

                    <div class="command">
                        <p:commandButton actionListener="#{ managerCriarAto.selecionarTipoSelo() }"
                                         styleClass="ui-priority-primary"
                                         update=":criarAtoForm:tipoSeloInputText, :criarAtoForm:tipoSelodialog" process="@this"
                                         value="Selecionar" icon="ui-icon-plus" oncomplete="dialogTipoSelo.hide();" />
                        <p:commandButton value="Cancelar" icon="ui-icon-cancel" onclick="dialogTipoSelo.hide()" process="@this"
                                         actionListener="#{ managerCriarAto.limparTipoSelos() }"
                                         update=":criarAtoForm:tipoSelodialog" />
                    </div>

                </p:dialog>

            </h:form>

        </ui:define>
    </ui:composition>

</html>